import React, { useState, useEffect } from 'react';
import {
    View,
    Text,
    TouchableOpacity,
    Modal,
    Animated,
    StyleSheet,
    FlatList,
    ListRenderItem,
    ViewStyle,
    TextStyle,
} from 'react-native';

interface Item {
    id: string;
    [key: string]: any; // 允许其他任意字段
}

interface AnimatedModalProps {
    visible: boolean; // 控制 Modal 显示/隐藏
    onClose: () => void; // 关闭 Modal 的回调
    items: Item[]; // 列表数据
    renderItem?: ListRenderItem<Item>; // 自定义 renderItem
    modalStyle?: ViewStyle; // Modal 容器样式
    itemStyle?: ViewStyle; // 列表项样式
    closeButtonStyle?: ViewStyle; // 关闭按钮样式
    closeButtonTextStyle?: TextStyle; // 关闭按钮文字样式
    closeButtonText?: string; // 关闭按钮文字
}

const AnimatedModal: React.FC<AnimatedModalProps> = ({
    visible,
    onClose,
    items,
    renderItem,
    modalStyle,
    itemStyle,
    closeButtonStyle,
    closeButtonTextStyle,
    closeButtonText = 'Close',
}) => {
    const [animation] = useState(new Animated.Value(0));

    useEffect(() => {
        if (visible) {
            Animated.timing(animation, {
                toValue: 1,
                duration: 300,
                useNativeDriver: true,
            }).start();
        } else {
            Animated.timing(animation, {
                toValue: 0,
                duration: 300,
                useNativeDriver: true,
            }).start();
        }
    }, [visible]);

    const translateY = animation.interpolate({
        inputRange: [0, 1],
        outputRange: [300, 0],
    });

    const opacity = animation.interpolate({
        inputRange: [0, 1],
        outputRange: [0, 1],
    });

    const defaultRenderItem: ListRenderItem<Item> = ({ item }) => (
        <TouchableOpacity style={[styles.item, itemStyle]} onPress={() => console.log(item)}>
            <Text style={styles.itemText}>{item.name}</Text>
        </TouchableOpacity>
    );

    return (
        <Modal transparent visible={visible} onRequestClose={onClose}>
            <View style={styles.modalOverlay}>
                <Animated.View style={[styles.modalContainer, modalStyle, { transform: [{ translateY }], opacity }]}>
                    <FlatList
                        data={items}
                        keyExtractor={(item) => item.id}
                        renderItem={renderItem || defaultRenderItem}
                    />
                    <TouchableOpacity style={[styles.closeButton, closeButtonStyle]} onPress={onClose}>
                        <Text style={[styles.closeButtonText, closeButtonTextStyle]}>{closeButtonText}</Text>
                    </TouchableOpacity>
                </Animated.View>
            </View>
        </Modal>
    );
};

const styles = StyleSheet.create({
    modalOverlay: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
    },
    modalContainer: {
        width: '80%',
        backgroundColor: 'white',
        borderRadius: 10,
        padding: 20,
        maxHeight: '60%',
    },
    item: {
        padding: 15,
        borderBottomWidth: 1,
        borderBottomColor: '#ccc',
    },
    itemText: {
        fontSize: 16,
    },
    closeButton: {
        marginTop: 10,
        padding: 10,
        backgroundColor: '#ccc',
        borderRadius: 5,
        alignItems: 'center',
    },
    closeButtonText: {
        fontSize: 16,
        color: 'white',
    },
});

export default AnimatedModal;
